<template>
  <div id="main-container">
    <HeaderBanner @refleshload="refleshload" :key="Math.random()*100" :notifyCounts="notifyCounts" />
    <EditPersonalMainContent ref="child" />
    <MainBannerComponents :key="Math.random()*100" :notifyCounts="notifyCounts"/>
  </div>
</template>
  <script>
import HeaderBanner from "@/components/HeaderBanner.vue";
import EditPersonalMainContent from "@/components/EditPersonalMainContent.vue";
import MainBannerComponents from "@/components/MainBannerComponents.vue";

export default {
  name: "EditPersonalView",
  components: {
    HeaderBanner,
    EditPersonalMainContent,
    MainBannerComponents,
  },
  data(){
    return{
      current_user_id:JSON.parse(localStorage.getItem("user")).user_id
        ? JSON.parse(localStorage.getItem("user")).user_id
        : 1,
      notifyCounts:0,
    }
  },
  mounted(){
    this.getNotReadNotify();
  },
  methods: {
    refleshload() {
      //调用子组件刷新数据
      this.$refs.child.refleshload();
    },
    //将消息通知通过主页面传递到组件中，减少请求次数
    async getNotReadNotify(){
      let res = await this.$http.post('getNotifyNotRead',{current_user_id:this.current_user_id});
      if(res.state==200){
        this.notifyCounts = res.data;
      }
    },
  },
};
</script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
#main-container {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

@media screen and (max-width: 720px) {
  #main-container {
    margin-top: 0px !important;
  }
}
</style>